<template>
    <div class="components-container">
        <div class="editor-container">
            <ace-editor
                :value="value"
                class="ace-editor"
                :min-lines="30"
                mode-path="text"
                @input="getValue"
            ></ace-editor>
        </div>
        <div class="preview">
            <div class="vue">
                <ace-editor
                    :value="vueStr"
                    class="ace-editor"
                    :min-lines="30"
                    mode-path="html"
                ></ace-editor>
            </div>
            <div class="api">
                <ace-editor
                    ref="ace"
                    :value="apiStr"
                    class="ace-editor"
                    :min-lines="30"
                    mode-path="html"
                ></ace-editor>
            </div>
        </div>
    </div>
</template>

<script>
import { beautifyVue, beautifyJS } from "@/utils/beautify";
import { generate as generateVue, generateApi } from "./generate";
import AceEditor from "@/components/YamlEditor";
import example, { btnMap } from "./config";

export default {
    name: "JsonEditorDemo",
    components: { AceEditor },
    data() {
        return {
            value: beautifyJS(JSON.stringify(example)),
            vueStr: "",
            apiStr: "",
        };
    },
    created() {},
    methods: {
        getValue(val) {
            try {
                let simpleConfig = eval(`(${val})`);
                const config = this.completeConfig(simpleConfig);
                this.vueStr = beautifyVue(generateVue(config));
                this.apiStr = beautifyJS(generateApi(config));
            } catch (e) {
                console.log(e);
            }
        },
        completeConfig(simpleConfig) {
            const {
                tableCNName,
                tableName,
                showIndex,
                showSelection,
                btns,
                tableInfo,
                queryColumns,
                tableColumns,
                editColumns,
            } = simpleConfig;
            const config = { tableCNName, tableName, showIndex, showSelection };
            // 按钮组
            config.btns = [];
            config.btns = btns.map((btn) => btnMap[btn]);
            // 初始值
            config.queryFormFields = {};
            config.queryFormOptions = [];
            config.columns = [];
            config.editFormFields = {};
            config.editFormOptions = [];

            // 搜索
            queryColumns.forEach((queryColumn) => {
                const column = tableInfo.find(
                    (item) => item.column == queryColumn
                );
                if (!column) return "查询列和配置列有出入";
                if (column.type == "boolean") {
                    config.queryFormFields[column.column] = true;
                } else if (column.type == "int") {
                    config.queryFormFields[column.column] = 1;
                } else {
                    config.queryFormFields[column.column] = "";
                }
                config.queryFormOptions.push({
                    prop: column.column,
                    label: column.label,
                });
            });

            // 表格列
            tableColumns.forEach((tableColumn) => {
                const column = tableInfo.find(
                    (item) => item.column == tableColumn
                );
                if (!column) return "表格列和配置列有出入";
                config.columns.push({
                    label: column.label,
                    prop: column.column,
                    align: "left",
                });
            });

            // 编辑列
            editColumns.forEach((editColumn) => {
                const column = tableInfo.find(
                    (item) => item.column == editColumn
                );
                if (!column) return "编辑列和配置列有出入";
                if (column.type == "boolean") {
                    config.editFormFields[column.column] = true;
                } else if (column.type == "int") {
                    config.editFormFields[column.column] = 1;
                } else {
                    config.editFormFields[column.column] = "";
                }
                config.editFormOptions.push({
                    prop: column.column,
                    label: column.label,
                });
            });
            console.log(config);
            return config;
        },
    },
};
</script>

<style scoped lang="scss">
.components-container {
    height: calc(100vh - 144px);
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    .editor-container {
        width: 30%;
        height: 100%;
        overflow: auto;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        border-right: 1px solid #ddd;
        margin-right: 3%;
    }
    .preview {
        height: 100%;
        flex: 1;
        overflow: auto;
        display: flex;
        flex-direction: column;
        .vue {
            height: 70%;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
            margin-bottom: 2%;
        }
        .api {
            flex: 1;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
        }
    }
}
</style>
